<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	
	<body>
		
		<!-- 以下是定义模版 -->
	
		<template id="addTemp">
			<div>
				<h1>自增的组件</h1>
				<h2>{{num}}</h2>
				<button  @click="addNum">添加数字</button>
			</div>
		</template>
		
	
		<div  id="app">
			<!-- 添加组件 -->
			<add-num-compont></add-num-compont>
			<router-link  to="/user">到用户</router-link>
			
	    </div>
		
		
		
		
		<script src="../js/vue-router.js"></script>
		<script src="../js/vue.js"></script>
		<script>
			const router = new VueRouter({
							//routes 定义路由规则
							routes: [
								{path:"/user",component: user},
								{path:"/dog",component: dog}
							]
			})
		
			
			
			
			//定义一个组建
			Vue.component("addNumCompont",{
				data(){
					return {
						num: 0
					}
				},
				template: "#addTemp",
				methods: {
					addNum(){
						this.num++;
					}
				}
			})
			
			
		const  app=new  Vue({
			   el: "#app"
		})
			
			
			
			
		</script>
		
		
	</body>
	
	
	
</html>
